<template>
  <div>
    <a-col :xl="groupGrid.xl" :lg="groupGrid.lg" :md="groupGrid.md" :sm="groupGrid.sm">
      <chart 
        v-if="head.graphType !== 'table'" 
        :chartData="chartData" 
        :head="head" 
        :graphType="head.graphType"
      />
      <div v-else-if="head.graphType && head.graphType === 'table'" >
        <graphreport-auto-table 
          :items="items"
          :cggraphreportData="cggraphreportData" 
          :chartData="chartData"
        >
        </graphreport-auto-table>
      </div>
      <!-- <div v-else-if="head.graphType">
        <a-card v-if="head.graphType !== 'table'" :title="head.name">
          <slot v-if="head.graphType !== 'table'" name="extra_" slot="extra"></slot>
          <tab-graphreport-auto-chart
            v-if="head.displayTemplate === 'tab'"
            :chartData="chartData"
            :head="head"
            :graphTypeDictOptions = "graphTypeDictOptions"
          >
          </tab-graphreport-auto-chart>
          <row-graphreport-auto-chart
            v-else-if="head.displayTemplate === 'single' || head.displayTemplate === 'double'"
            :chartData="chartData"
            :head="head"
            :graphTypeDictOptions = "graphTypeDictOptions"
            :col="getCol()"
          >
          </row-graphreport-auto-chart>
        </a-card>
        <a-card style="margin-top:10px;" title="数据明细" v-if="head.graphType && head.graphType.indexOf('table')>=0" >
          <graphreport-auto-table :items="items" :cggraphreportData="cggraphreportData" :chartData="chartData"></graphreport-auto-table>
        </a-card>
      </div> -->
    </a-col>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import GraphreportAutoTable from './GraphreportAutoTable'
import Chart from './Chart'
import { OnlAutoChartMixins } from '../mixins/OnlAutoChartMixins'
export default {
  name: 'GridGraphreportAutoChart',
  mixins: [OnlAutoChartMixins],
  components: {
    GraphreportAutoTable,
    Chart
  },
  computed: {
    // graphTypeDictOptions() { // 获取需要渲染的图表类型
    //   var graphTypes = this.head.graphType || []
    //   var charts = []
    //   this.onlineGraphType.forEach(function(item, i) {
    //     if (graphTypes.indexOf(item.value) >= 0 && item.value !== 'table') {
    //       charts.push(item)
    //     }
    //   })
    //   return charts
    // }
  },
  data() {
    return {
      groupGrid: {}
    }
  },
  watch: {
    propsChartData: {
      handler(val, oldVal) {
        this.groupGrid = val.param.groupGrid && JSON.parse(val.param.groupGrid)
        this.init()
      },
      deep: true // true 深度监听
    }
  },
  props: ['propsChartData'],
  created() {
    // 获取图表栅格分组
    this.groupGrid = this.propsChartData.param.groupGrid && JSON.parse(this.propsChartData.param.groupGrid)
  },
  methods: {

  },
  mounted(){
    console.log('GridGraphreportAutoChart')
    console.log(this.propsChartData)
  }
}
</script>
<style scoped>
.ant-table td { white-space: nowrap; }
</style>
